<template>
	<view id="detailsPage">
		<cu-custom bgColor="bg-blue" :isBack="true">
			<block slot="backText">返回</block>
			<block slot="content">{{fields.title}}</block>
		</cu-custom>

		<view>
			<!-- <view class="text-lg padding text-center">
				<text class="text-red">{{fields.title}}</text>
			</view> -->
			<view class="text-xs padding">
				<view class="cu-capsule round padding-top-xs" style="margin-right: 5px;" v-if="fields.singer_name">
					<view class='cu-tag bg-blue'>
						歌手
					</view>
					<view class="cu-tag line-blue">
						{{fields.singer_name}}
					</view>
				</view>
				<view class="cu-capsule round padding-top-xs" style="margin-left: 0; margin-right: 5px;" v-if="fields.mode_title">
					<view class='cu-tag bg-green'>
						类型
					</view>
					<view class="cu-tag line-green">
						{{fields.mode_title}}
					</view>
				</view>
				<view class="cu-capsule round padding-top-xs" style="margin-left: 0; margin-right: 5px;" v-if="fields.source">
					<view class='cu-tag bg-grey'>
						来源
					</view>
					<view class="cu-tag line-gray">
						{{fields.source}}
					</view>
				</view>
				<view class="cu-capsule round padding-top-xs" style="margin-left: 0; margin-right: 5px;" v-if="fields.source">
					<view class='cu-tag bg-red'>
						浏览
					</view>
					<view class="cu-tag line-red">
						{{fields.click}}
					</view>
				</view>
			</view>

			<view class="images">
				<image class="item_image" style="width: 100%;" mode="widthFix" v-for="(item,index) in fields.images" :key="index"
				 :src="item" @tap="preview" :id="index"></image>
			</view>
		</view>

		<view class="padding text-sm text-gray" style="margin-bottom: 60px;">声明：本站发布的资源均来自互联网，仅供交流学习之用，请勿作商业用途，所有资源版权归原作者所有。如果有侵犯到您的权益，请联系本站删除，谢谢合作！</view>

		<view class="cu-bar tabbar bg-black shadow foot">
			<view class="action text-gray" @tap="Tool.reLaunch({url:'../index/index'})">
				<view class="cuIcon-homefill"></view> 首页
			</view>
			<view class="action" :class="isCollection ? 'text-green':'text-gray'" @tap="collection(fields)">
				<view class="cuIcon-favorfill"></view> 收藏
			</view>
			<!-- <view class="action text-gray" @click="play">
				<view class="cuIcon-playfill"></view>
				自动换页
			</view> -->
			<view class="action text-gray">
				<navigator url="../user/index">
					<view class="cuIcon-my"></view>我的
				</navigator>
			</view>
			<view class="bg-orange submit cu-share">
				<button open-type="share" class="bg-orange cu-btn flex flex-sub">
					<view class="cuIcon-share padding-right-xs"></view>分享
				</button>
			</view>
			<view class="bg-red submit" @click="download">
				<view class="cuIcon-pulldown padding-right-xs"></view>下载曲谱
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				fields: {},
				downloadLock: true,
				downloadTotal: 0,
				isCollection:false
			}
		},
		onShareAppMessage(obj) {
			return {
				title:fields.title ? fields.title:''
			}
		},
		onLoad(param) {
			const id = param.id;
			if (id) {
				this.getData(id);
				this.checkIsCollection(id);
			} else {
				this.Tool.alert('获取数据失败！')
			}
			
			//保存常亮
			//#ifndef H5
			uni.setKeepScreenOn({
				keepScreenOn: true
			});
			//#endif
		},
		methods: {
			checkIsCollection(id){
				const collection = this.Tool.getStorage(this.cacheKey.collection);
				if(!collection) return false;
				// console.log(id, collection);
				for(let i in collection){
					if(collection[i].id == id){
						this.isCollection = true;
						break;
					}
				}
			},
			getData(id) {
				uni.showLoading({
					title: '正在加载···'
				})

				uni.request({
					url: this.Tool.url('details') + '/' + id,
					success: (res) => {
						const data = res.data
						if (res.statusCode != 200 || data.status != 200) {
							this.Tool.alert('获取数据失败！');
							return false;
						}

						this.fields = data;
						
						this.browseHistory(data);//记录浏览历史
						console.log(data);
					},
					complete: () => {
						uni.hideLoading();
					}
				})
			},
			preview(res) {
				let myindex = res.currentTarget.id;
				uni.previewImage({
					urls: this.fields.images,
					current: myindex
				})
			},
			_download(i) {
				const images = this.fields.images,
					imgLen = images.length;
				
				i-=1;
				
				if (i < 0) {
					this.Tool.alert('成功下载' + imgLen + '张曲谱！', 'success');
					this.downloadLock = true;
					if(this.fields && this.fields.id){
						uni.request({
							url:this.Tool.url('download_total')+'/'+this.fields.id
						});
					}
				} else {
					uni.downloadFile({
						url: images[i],
						success: (res) => {
							if (res.statusCode === 200) {
								uni.saveImageToPhotosAlbum({
									filePath: res.tempFilePath,
									success: (ret) => {
										this._download(i)
									},
									fail: (err) => {
										this.Tool.alert('保存文件失败！')
									}
								})
							}
						},
						fail: () => {
							this.Tool.alert('下载失败！！')
							this.downloadLock = true;
						}
					});
				}
			},
			download() {
				let imgLen = this.fields.images ? this.fields.images.length:0;
				let downloadTotal = 0;

				if (!imgLen) {
					this.Tool.alert('下载失败！');
					return false;
				}

				uni.showLoading({
					title: '正在下载···'
				})

				//防止重复点击下载
				if (!this.downloadLock) return false;

				this.downloadLock = false;
				
				this._download(imgLen);
			},
			browseHistory(fields){
				this._saveRecord(fields, this.cacheKey.browseHistory, 30);
			},
			collection(fields){
				this._saveRecord(fields,this.cacheKey.collection, 30);
				this.isCollection = true;
			},
			_saveRecord(fields, key, num){
				if(!fields) return false;
				
				let history = this.Tool.getStorage(key);
				let data = {
					title: fields.title,
					click: fields.click,
					mode:fields.mode,
					singer_name:fields.singer_name,
					id:fields.id,
					cate_info:fields.cate_info,
					mode_info:fields.mode_info
				}
				// console.log('h:',history, data);
				if (!history) {
					history = [data];
					this.Tool.setStorage(key, history);
				} else {
					const len = history.length;
					
					if(len>=num) history.splice(len-1,1);
					
					let isExist = -1;
					for(let i in history){
						if(history[i].id == fields.id) isExist = i;
					}
					// console.log('isExist:', isExist)
					if (isExist >= 0) history.splice(isExist, 1);
					history.unshift(data);
					this.Tool.setStorage(key, history);
				}
			}
		}
	}
</script>

<style>
.cu-share button{
	height: 100%;
	width: 100%;
	/* font-size: 12px; */
	/* line-height: 20px; */
	background:none;
	color: #fff;
	border: 0 none;
	border-radius: 0;
	padding: 0;
}
.cu-share button::after{
	border: 0 none;
	height: 100%;
	background: none;
}

.cu-share [class*="cuIcon-"]{
	/* font-size: 20px; */
}

</style>
